import { Popup, Toast } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import { CloseOutline } from 'antd-mobile-icons'
import PdfImg from '@/resource/archives/pdf.png'
import dayjs from 'dayjs'
import { resumeTypeMap } from '@/const'
import { formateMoney } from '@/utils'

type PropsType = {
    visible: boolean
    /** 类型：1-意向；2-简历 */
    type: number
    /** 列表数据 */
    data: Record<string, any>[]
    /** 关闭弹窗回调 */
    onCancel: () => void
    /** 确认按钮回调 */
    onOk: (v?: Record<string, any>) => void
}

const SelectModal = (props: PropsType) => {
    const { visible, type = 1, data, onCancel, onOk } = props || {}
    const [selectedItem, setSelectedItem] = useState<Record<string, any>>()
    /** 类型Map */
    const typeMap = new Map([
        [1, { title: '选择求职意向', btnText: '下一步' }],
        [2, { title: '选择简历附件', btnText: '确定' }],
    ])
    useEffect(() => {
        if (visible) {
            setSelectedItem(undefined)
        }
        return () => {
            setSelectedItem(undefined)
        }
    }, [visible])

    const onSubmit = () => {
        if (!selectedItem) {
            Toast.show({
                content: '请' + typeMap.get(type)?.title,
                icon: 'fail',
            })
            return
        }
        onOk(selectedItem)
        setSelectedItem(undefined)
    }

    return (
        <Popup
            visible={visible}
            bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '43vh',
            }}
        >
            <div className={styles.wrap_box}>
                <div className={styles.header_box}>
                    <CloseOutline className={styles.icon} onClick={onCancel} />
                    <p className={styles.title}>{typeMap.get(type)?.title}</p>
                </div>
                <div className={styles.container}>
                    {data?.map((item: any, index: number) => {
                        return type === 1 ? (
                            <div className={[styles.intention, item.code === selectedItem?.code && styles.selected].join(' ')} key={item.code} onClick={() => setSelectedItem(item)}>
                                <p className={styles.intention_title}>求职意向{index + 1}</p>
                                <div className={styles.intention_row}>
                                    {item.capacityName}
                                    <span className={styles.dot} />
                                    {resumeTypeMap.get(Number(item.type))}
                                </div>
                                <div className={styles.intention_row}>
                                    {item.cityName}
                                    <span className={styles.line} />
                                    {item.industryName}
                                </div>
                                {Number(item.type) !== 2 && (
                                    <div className={styles.intention_row}>
                                        {formateMoney(item.minSalary)} ~ {formateMoney(item.maxSalary)}
                                    </div>
                                )}
                            </div>
                        ) : (
                            <div className={[styles.resume, item.code === selectedItem?.code && styles.selected].join(' ')} key={item.code} onClick={() => setSelectedItem(item)}>
                                <img src={PdfImg} />
                                <div>
                                    <p>{item.fileName}</p>
                                    <p className={styles.update_time}>更新于{dayjs(item.updatedAt).format('YYYY.MM.DD')}</p>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className={styles.footer}>
                    <div className={styles.btn} onClick={onCancel}>
                        取消
                    </div>
                    <div className={[styles.btn, styles.primary].join(' ')} onClick={onSubmit}>
                        {typeMap.get(type)?.btnText}
                    </div>
                </div>
            </div>
        </Popup>
    )
}

export default SelectModal
